<!--  -->
<template>
  <div class='app-main-container'>
    <div class="notice">
      <div class="noticeTit">{{ translate('tzgg') }}</div>
      <button class="btn" @click="allToReadfn">{{ translate('qbtz') }}</button>
    </div>
    <!-- <el-tabs v-model="activeTab" @tab-click="getList()">
      <el-tab-pane :label="$t('message.ygtz')" name="0" />
    </el-tabs> -->
    <el-collapse v-loading="listLoading" v-model="activeName" accordion>
      <el-collapse-item :name="index" v-for="(item, index) in list">
        <template slot="title">
          <div class="collapseTit" @click="changePase(item, index)">
            <div class="title" :class="{ actit: list[index].status == 1 }">{{ item.title }}</div>
            <div class="titTime">{{ item.publishTime }}</div>
          </div>
        </template>
        <div class="content">{{ item.content }}</div>
      </el-collapse-item>
    </el-collapse>
    <Pagination :total="total" :page="pagination.page" @current-change="currentPageChange"
      @SizeChange="handleSizeChange" />
  </div>
</template>

<script>
import Pagination from '@/components/paginations'
import { terraceMessageList, terraceMessageDetail,allToRead } from '@/api'

export default {
  components: {
    Pagination
  },
  data() {
    //这里存放数据
    return {
      activeTab: '0',
      activeName: '1',
      total: 0,
      list: [],
      pagination: {
        page: 1,
        rows: 10
      },
      listLoading: false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 获取信息
    getList() {
      const { pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      this.listLoading = true
      terraceMessageList({ pagination, param: { venueId } })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          console.log("🚀 ~ .then ~ list:", res.recordList)
          this.list = res.recordList
          this.total = res.totalCount
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    // 全部已读
    allToReadfn() {
      allToRead({ param: {flag:'1'} })
        .then(res => {
          console.log("🚀 ~ allToReadfn ~ res:", res)
          this.getList()
        })
    },
    // 获取详情，打上标记
    changePase(item, index) {
      console.log("🚀 ~ changePase ~ item:", item)
      terraceMessageDetail({ param: { id: item.id } })
        .then(res => {
          if (res.errorCode !== '000000') return
          this.list[index].status = '1'
        })
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList()
    },
    currentPageChange(val) {
      this.pagination.page = val
      this.getList()
    },
  },
  //生命周期 - 创建完成
  created() {
    this.getList()
  },
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
div {
  font-family: PingFangSC, PingFang SC;
}

.app-main-container {
  .notice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;

    .noticeTit {
      font-weight: 500;
      font-size: 18px;
      color: #435EBE;
    }

    .btn {
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      width: 88px;
      height: 36px;
      background: #FFFFFF;
      border-radius: 2px;
      border: 1px solid #DFE2E8;
    }
  }



  .collapseTit {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-weight: 500;
    font-size: 15px;
    color: #000000;

    .actit {
      color: #666666;
    }

    .titTime {
      margin-right: 10px;
      line-height: 45px;

    }
  }

  .content {
    padding-right: 400px;
    font-weight: 400;
    font-size: 15px;
    color: #555555;
  }

  ::v-deep .el-collapse {
    border-top: none !important;
  }

  ::v-deep .el-collapse-item__header:hover {
    background: #F4F7FC;

    .title {
      color: #435EBE;
    }
  }
}
</style>